Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[이수지] sprint2 #27

Conversation

mulddang2
Copy link
Collaborator

요구사항

기본

1. 로그인 페이지, 회원가입 페이지 공통

  • “판다마켓" 로고 클릭 시 루트 페이지(“/”)로 이동합니다.
  • 로그인 페이지, 회원가입 페이지 모두 로고 위 상단 여백이 동일합니다.
  • input 요소에 focus in 일 때, 테두리 색상은 #3692FF입니다.
  • input 요소에 focus out 일 때, 테두리는 없습니다.
  • SNS 아이콘들은 클릭시 각각 실제 서비스 홈페이지로 이동합니다.

2. 로그인 페이지

  • “회원가입”버튼 클릭 시 “/signup” 페이지로 이동합니다.

3. 회원가입 페이지

  • “로그인”버튼 클릭 시 “/login” 페이지로 이동합니다.

심화

  • palette에 있는 color값들을 css 변수로 등록하고 사용해 주세요.
  • 비밀번호 input 요소 위에 비밀번호를 확인할 수 있는 아이콘을 추가해 주세요.

주요 변경사항

  • sprint1 코드 리펙토링
  • 로그인, 회원가입 페이지 추가

스크린샷

1. 로그인 페이지

image

2. 회원가입 페이지

image

멘토에게

@mulddang2 mulddang2 requested a review from GANGYIKIM August 17, 2024 08:33
@mulddang2 mulddang2 added the 매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다. label Aug 17, 2024
Copy link
Collaborator

@GANGYIKIM GANGYIKIM left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수지님 이주차 스프린트 미션 고생하셨습니다!
심화 요구 사항까지 무난하게 구현하신것 같습니다 😁
기존 코드 리뷰 사항도 반영해주시고 리팩토링하신 것도 좋습니다.
이번에 작업을 잘 해주셔서 첨언할 것이 거의 없었습니다.
아래는 전반적인 피드백입니다.


  • git commit 단위를 쪼개시고 msg 를 일관된 형식으로 작성하신 것이 좋습니다.
  • login, signup 페이지의 경우 비슷한 디자인이라 하나의 css 를 공유하는 것이 유지보수에 좋을 것 같습니다.

Comment on lines +19 to +23
<label for="email" class="login__label">이메일</label>
<div class="login__field--id">
<input
type="text"
id="email"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
label 과 input을 연결하신거 좋습니다 👍

Comment on lines +59 to +60
<button type="submit" class="login__submit">로그인</button>
</form>
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
button 과 form 태그를 같이 쓰신거 좋습니다 👍

Comment on lines +51 to +53
top: 50%;
right: 2.4rem;
transform: translateY(-50%);
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
중앙 정렬을 위해 이렇게 처리하신거 좋습니다 👍
아시겠지만 혹시나 해서 설명을 드리자면, 상대요소의 상단(top) 기준으로 50% 되는 곳에 위치시키게 되면
input height: 60px, icon height: 30px 일경우 60 * 0.5 = 30px 에 아이콘이 위치하게 됩니다.
시각적으로 중앙에 위치하기 위해서는 30px가 아닌 30 - (30 / 2) = 15px에 위치해야 합니다.
이를 고정값(15px)처럼 입력하게 되면 icon의 height가 변경되었을 시 같이 변경되야 하기 때문에 위와같이 작성합니다.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P3:
login.css 와 중복되는 내용이 많을 것 같습니다.
중복을 줄일 방법을 고민해보시면 좋겠습니다.

@GANGYIKIM GANGYIKIM merged commit 4363e16 into codeit-bootcamp-frontend:Basic-이수지 Aug 19, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
매운맛🔥 뒤는 없습니다. 그냥 필터 없이 말해주세요. 책임은 제가 집니다.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants